@using Rental.Data
@using Rental.Data.Context
@inject RentalContext RentalContext

<nav class="navbar navbar-expand-sm navbar-dark fw-bold"
     style="background-color: #000; color: #FFF; font-family: Roboto, sans-serif;">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">
            <img src="/img/png/Logo.png" alt="Logo" width="140" height="36">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/About">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/All">Rent</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/Service">Services</a>
                </li>
                <AuthorizeView Roles="Administrator">
                    <Authorized>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Upss!</a>
                            <ul class="dropdown-menu dropdown-menu-dark">
                                <li>
                                    <a class="dropdown-item" href="/List/Users">Users</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="/User/Loans">Loans</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="/Own">Own</a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <a class="dropdown-item" href="/Owe">Owe</a>
                                </li>
                            </ul>
                        </li>
                    </Authorized>
                    <NotAuthorized>
                        <li class="nav-item">
                            <a class="nav-link" href="/Contact">Contact</a>
                        </li>
                    </NotAuthorized>
                </AuthorizeView>
            </ul>
        </div>

        @if (_user == null)
        {
            <span class="d-none d-md-block navbar-text me-4">
                Sign Up
            </span>
            <span class="d-none d-md-block navbar-text me-3 border-primary border rounded-pill px-3 bg-primary fw-bold"
                  style="color: #FFF">
                <a href="/SignIn" class="text-decoration-none">Sign In</a>
            </span>
        }
        else
        {
            <span class="d-none d-sm-block d-md-block navbar-text me-4">
                @_user.FirstName, @_user.LastName
            </span>
            <span class="d-none d-sm-block d-md-block navbar-text me-4 dropstart">
                <a id="rental-dropstart-user" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="@_user.Icon" height="30"/>
                </a>
                <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="rental-dropstart-user">
                    <li>
                        <a class="dropdown-item active" href="/Profile">Profile</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">My Panel</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Configuration</a>
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a class="dropdown-item bg-danger" href="/SignOutControl?returnUrl=/">Sign Out</a>
                    </li>
                </ul>
            </span>
        }
    </div>
</nav>

@code
{
    private User _user;

    [CascadingParameter]
    private Task<AuthenticationState> AuthenticationStateTask { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateTask;
        var user = authState.User;

        if (user.Identity.IsAuthenticated)
        {
            _user = await RentalContext.GetUserByUsername(user.Identity.Name);
        }
    }
}